<template>
  <div>
    <def-layout type="col0-24" :page="page" @invoke="invoke">
      <div slot="search" class="form-items">
        <el-form-item>
          <el-input v-model="formSearch.carNo" placeholder="车牌号" />
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="formSearch.createDate"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            :picker-options="$constants.pickerOptions"
          />
        </el-form-item>
      </div>
      <div slot="content" class="grid">
        <page-grid v-if="self!=null" :parent="self">
          <div slot="columns">
            <!-- <el-table-column prop="createDate" sortable align="center" label="日期" width="150" /> -->
            <!-- <el-table-column prop="carId" sortable align="right" label="车辆id" width="150" /> -->
            <el-table-column prop="carNo" sortable align="right" label="车牌号" width="150" />
            <el-table-column prop="logisticsNumber" sortable align="right" label="运输数量" width="150" />
            <el-table-column prop="logisticsMoney" sortable align="right" label="运输金额" width="150" />
            <el-table-column prop="logisticsSettlementMoney" sortable align="right" label="运输已结算金额" width="180" />
            <el-table-column prop="logisticsNotSettlementMoney" sortable align="right" label="运输未结算金额" width="180" />
            <el-table-column prop="expensesMoney" sortable align="right" label="运输支出金额" width="180" />
            <el-table-column prop="expensesSettlementMoney" sortable align="right" label="已结算运输支出金额" width="180" />
            <el-table-column prop="expensesNotSettlementMoney" sortable align="right" label="未结算运输支出金额" width="180" />
            <el-table-column prop="logisticsTotalWeight" sortable align="right" label="运输总量" width="150" />
            <el-table-column prop="logisticsMileage" sortable align="right" label="运输里程" width="150" />
          </div>
        </page-grid>
      </div>
    </def-layout>

  </div>
</template>
<script>
import adminSupport from 'lola-admin-support-el'

export default {
  name: 'CarTopManage',
  components: {
  },
  mixins: [adminSupport.mixins.index],
  data() {
    return {
      name: 'CarTopManage',
      formSearch: { productName: '', createDate: [] },
      self: null
    }
  },
  created() {
    this.init()// 页面自定义初始化
  },
  methods: {
    init() {
      var that = this
      this.dataGrid.params.sortFields = 'logisticsMoney_d'
      // Excel导出配置
      this.page.excelParams = {
        fileds: ['createDate', 'carId', 'carNo', 'logisticsNumber', 'logisticsMoney', 'logisticsSettlementMoney', 'logisticsNotSettlementMoney', 'logisticsExpensesMoney', 'logisticsExpensesSettlementMoney', 'logisticsExpensesNotSettlementMoney', 'logisticsTotalWeight', 'logisticsMileage'],
        queryParam: this.dataGrid.params,
        size: 10000
      }
      that.loadData()// 加载数据(按钮+列表) 扩展需重写该方法
      this.self = that
      this.dataGrid.table.tool = false
    },
    search() {
      const queryList = []
      if (!String.isNullOrEmpty(this.formSearch.carNo)) {
        queryList.push({ 'key': 'l.no', 'value': this.formSearch.carNo, 'oper': '=', 'join': 'and' })
      }
      if (this.formSearch.createDate !== null && this.formSearch.createDate.length > 0) {
        queryList.push({ 'key': 'o.createDate', 'value': this.formSearch.createDate[0], 'oper': '>=', 'join': 'and' })
        queryList.push({ 'key': 'o.createDate', 'value': this.formSearch.createDate[1], 'oper': '<=', 'join': 'and' })
      }
      this.dataGrid.params.queryList = queryList
      this.refresh()
    },
    bindSearch() {
      this.formSearch = { productName: '', createDate: [] }
    }
  }
}
</script>
